import { Avatar, Tooltip } from "antd";
import {
    UserOutlined,
    DownOutlined,
    BulbFilled,
    ExpandOutlined,
    CompressOutlined,
    BellFilled
} from "@ant-design/icons";
import React, {useState,useEffect} from "react";
import "./UserLink.css";
import { Link, useNavigate } from "react-router-dom";
import { myStorage } from "../../utils";
import store from "../../store/store";

const notice =
    (<div className="notice">
        <h3>通知</h3>
        <div className="notice-item">
            <div className="title">关于<span>??</span>的通知</div>
            <div className="content">react通知</div>
            <div className="time">2020-12-08</div>
        </div>
        <div className="notice-item">
            <div className="title">关于<span>??</span>的通知</div>
            <div className="content">react通知</div>
            <div className="time">2020-12-08</div>
        </div>
    </div>)
function UserLink(props) {
    const navigate = useNavigate();
    // 退出登录
    const handleLogout = ()=>{
        myStorage.remove("token");
        // 跳转登录页
        navigate("/login");
    }
    const menu =
        (<div className="menu">
            <div className="ptb">
                <Link className="link-item" to="/home">首页</Link>
                <Link className="link-item" to="/home/system/modify">修改密码</Link>
            </div>
            <div className="ptb">
                <div className="link-item" onClick={handleLogout}>退出登录</div>
            </div>
        </div>);
    // 点击切换深色模式
    const [flag,setFlag] = useState(true);
    const handleColor = ()=>{
        setFlag(!flag);
    }
    useEffect(() => {
        props.handleColor(flag);
    }, [flag]);
    /* 进入全屏 */
    const fullScreen = ()=>{
        let el = document.getElementById('body') // 获取需要全屏显示的因素
        let rfs = el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
            || el.msRequestFullScreen
        // 获取实现全屏的方法，此处兼容了火狐、谷歌、IE、safari浏览器
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el)
            return
        }
        if (typeof window.ActiveXObject != "undefined") {
            let wscript = new ActiveXObject("WScript.Shell") // 取得系统目录
            if (wscript) {
                wscript.SendKeys("{F11}")
            }
        }
    }
    /* 退出全屏 */
    const exitFullScreen = ()=>{
        let el = document // 此时获取的元素是 document
        let cfs = el.cancelFullScreen
            || el.webkitCancelFullScreen
            || el.mozCancelFullScreen
            || el.exitFullScreen
        if (typeof cfs != "undefined" && cfs) {
            cfs.call(el)
            return
        }
        if (typeof window.ActiveXObject != "undefined") {
            let wscript = new ActiveXObject("WScript.Shell")
            if (wscript != null) {
                wscript.SendKeys("{F11}")
            }
        }
    }
    /* 全屏状态下无法监听Esc事件 */
    const [isFull,setIsFull] = useState(false);
    window.onresize = function () {
        let isFull = document.mozFullScreen
            || document.fullScreen
            || document.webkitIsFullScreen
            || document.webkitFullScreen
            || document.msFullScreen
        if (!isFull) {
            setIsFull(false)
        }else {
            setIsFull(true)
        }
    }
  return (
      <div className="UserLink" style={{paddingRight: 20,backgroundColor: flag?"":"#001529"}}>
          <span onClick={handleColor} className="link-icon">
              <BulbFilled style={{color: flag ? "#001529":"#eee"}} />
          </span>
          <Tooltip
              placement="bottom"
              trigger="click"
              title={notice}
              color="white"
              zIndex="99"
              overlayInnerStyle={{color:"black",padding:"15px",width:"280px"}}
          >
              <span className="link-icon">
                  <BellFilled style={{color: flag ? "#001529":"#eee"}} />
              </span>
          </Tooltip>
          {
              isFull?<span onClick={exitFullScreen} className="full-screen">
              <CompressOutlined style={{color: flag ? "#001529":"#eee"}} />
          </span>:<span onClick={fullScreen} className="full-screen">
              <ExpandOutlined style={{color: flag ? "#001529":"#eee"}} />
          </span>
          }
        <Tooltip
            placement="bottom"
            title={menu}
            color="white"
            zIndex="100"
            overlayInnerStyle={{color:"black",padding:0}}
        >
          <Avatar style={{marginBottom: 3}} size="small" icon={<UserOutlined />} />
          <span style={{marginLeft: 5,color: flag ? "":"#eee"}}>欢迎 <span>{store.getState().userInfo.username}</span></span>
          <DownOutlined style={{fontSize:12,marginLeft:5,color: flag ? "":"#eee"}} />
        </Tooltip>
      </div>
  )
}

export default UserLink;